//加载乐馆页面内容
function loadMusicHall() {
    const page2 = document.getElementById('page2');

    // 防止重复加载
    if (page2.innerHTML.trim() !== "") return;

    // 动态加载 HTML 内容
    fetch('../pages/musicHall.html')
        .then(response => {
            if (!response.ok) throw new Error('加载乐馆内容失败');
            return response.text();
        })
        .then(html => {
            page2.innerHTML = html;
            setTimeout(() => {
                showMusicHallPage('Highlights'); // 默认加载精选内容
            }, 10); // 延时调用
        })
        .catch(error => {
            console.error(error);
            page2.innerHTML = '<p>加载失败，请稍后重试。</p>';
        });
}

//点击不同的板块动态加载对于内容   即loadMusicHallContent(section)
function showMusicHallPage(page) {
    const pages = document.querySelectorAll('.music-hall-page');
    pages.forEach(p => p.style.display = 'none'); // 隐藏所有页面
    const selectedPage = document.getElementById(page);
    if (selectedPage) {
        selectedPage.style.display = 'block'; // 显示选中的页面
        loadMusicHallContent(page); // 加载相应的内容
    }
}

function loadMusicHallContent(section) {
    const contentDiv = document.getElementById(section);
    contentDiv.innerHTML = ''; // 清空当前内容

    // 根据不同的部分加载内容
    switch (section) {
        case 'Highlights':
            loadHighlights(contentDiv);
            break;
        case 'Charts':
            loadCharts(contentDiv);
            break;
        case 'Artists':
            loadArtists(contentDiv);
            break;
        case 'Playlist_Categories':
            loadPlaylists(contentDiv)
            break;
        case 'Listen_and_Play':
            loadListenAndPlay(contentDiv);
            break;
    }
}


//********************************************精选******************/

//第一个轮播图的数据
let currentHighlightIndex = 0; // 当前显示的轮播图组索引
const highlightItems = [
    {img: '../musicImages/highlight1.png', alt: 'Highlight 1'},
    {img: '../musicImages/highlight2.png', alt: 'Highlight 2'},
    {img: '../musicImages/highlight3.png', alt: 'Highlight 3'},
    {img: '../musicImages/highlight4.png', alt: 'Highlight 4'},
    {img: '../musicImages/highlight5.png', alt: 'Highlight 5'},
    {img: '../musicImages/highlight6.png', alt: 'Highlight 6'},
    {img: '../musicImages/highlight7.png', alt: 'Highlight 7'},
    {img: '../musicImages/highlight8.png', alt: 'Highlight 8'},
    {img: '../musicImages/highlight9.png', alt: 'Highlight 9'},
    {img: '../musicImages/highlight10.png', alt: 'Highlight 10'},
    {img: '../musicImages/highlight11.png', alt: 'Highlight 11'},
    {img: '../musicImages/highlight12.png', alt: 'Highlight 12'},
    {img: '../musicImages/highlight13.png', alt: 'Highlight 13'},
];
//除了第一个轮播图和推荐听书，音质专区，最新发行板块 的其他数据
const highlightsData = [
    {
        title: '官方歌单',
        subtitle: '官方甄选精选歌单',
        images: [
            {src: '../images/avatar.jpg', desc: '欧美 | 欢快氛围', count: '2149.9万'},
            {src: '../images/enSong.webp', desc: '欧美 | 欢快氛围', count: '2149.9万'},
            {src: '../images/happy.jpg', desc: '欧美 | 欢快氛围', count: '2149.9万'},
            {src: '../images/liangbo.jpg', desc: '欧美 | 欢快氛围', count: '2149.9万'},
            {src: '../images/oldsong.jpg', desc: '欧美 | 欢快氛围', count: '2149.9万'},
            {src: '../images/quer.webp', desc: '欧美 | 欢快氛围', count: '2149.9万'},
        ],
        hasMore: true,
        isCarousel: false
    },
    {
        title: '推荐游戏',
        subtitle: '微信最热门小游戏',
        images: [
            {src: '../images/avatar.jpg', desc: '欧美 | 欢快氛围', count: '2149.9万'},
            {src: '../images/enSong.webp', desc: '欧美 | 欢快氛围', count: '2149.9万'},
            {src: '../images/happy.jpg', desc: '欧美 | 欢快氛围', count: '2149.9万'},
            {src: '../images/liangbo.jpg', desc: '欧美 | 欢快氛围', count: '2149.9万'},
            {src: '../images/oldsong.jpg', desc: '欧美 | 欢快氛围', count: '2149.9万'},
            {src: '../images/quer.webp', desc: '欧美 | 欢快氛围', count: '2149.9万'},
        ],
        hasMore: true,
        isCarousel: false
    },
    {
        title: '推荐听书',
        isCarousel: true
    },
    {
        title: '最新发行',
        h4Items: ['最新', '内地', '港台', '欧美', '韩国', '日本'],
        hasMore: true,
        isCarousel: true
    },
    {
        title: '分类专区',
        hasMore: false,
        isCarousel: true
    }
];
//推荐听书，音质专区，最新发行  图片等的信息包括来源之类的
const highlightContainerItems = {
    '推荐听书': [
        {src: "../musicImages/highlight1.png", count: "1.0亿", desc: "大自然轻音乐"},
        {src: "../musicImages/highlight2.png", count: "723.1万", desc: "中国通史"},
        {src: "../musicImages/highlight3.png", count: "324.1万", desc: "沉睡轻音"},
        {src: "../musicImages/highlight4.png", count: "433.2万", desc: "山野秘谈"},
        {src: "../musicImages/highlight5.png", count: "795.4万", desc: "脑波音乐"},
        {src: "../musicImages/highlight6.png", count: "385.7万", desc: "轮回乐园"},
        {src: "../musicImages/highlight4.png", count: "433.2万", desc: "山野秘谈"},
        {src: "../musicImages/highlight5.png", count: "795.4万", desc: "脑波音乐"},
        {src: "../musicImages/highlight6.png", count: "385.7万", desc: "轮回乐园"},
    ],
    '最新发行': [
        {
            src: "../musicImages/highlight1.png",
            playlist_name: "这一路",
            singer_name: "周杰伦",
            release_date: "2021-01-01"
        },
        {
            src: "../musicImages/highlight2.png",
            playlist_name: "这一路",
            singer_name: "周杰伦",
            release_date: "2021-01-01"
        },
        {
            src: "../musicImages/highlight3.png",
            playlist_name: "这一路",
            singer_name: "周杰伦",
            release_date: "2021-01-01"
        },
        {
            src: "../musicImages/highlight4.png",
            playlist_name: "这一路",
            singer_name: "周杰伦",
            release_date: "2021-01-01"
        },
        {
            src: "../musicImages/highlight5.png",
            playlist_name: "这一路",
            singer_name: "周杰伦",
            release_date: "2021-01-01"
        },
        {
            src: "../musicImages/highlight6.png",
            playlist_name: "这一路",
            singer_name: "周杰伦",
            release_date: "2021-01-01"
        },
        {
            src: "../musicImages/highlight4.png",
            playlist_name: "这一路",
            singer_name: "周杰伦",
            release_date: "2021-01-01"
        },
        {
            src: "../musicImages/highlight5.png",
            playlist_name: "这一路",
            singer_name: "周杰伦",
            release_date: "2021-01-01"
        },
        {
            src: "../musicImages/highlight6.png",
            playlist_name: "这一路",
            singer_name: "周杰伦",
            release_date: "2021-01-01"
        },
    ],
    '分类专区': [
        {src: "../musicImages/highlight1.png", albums_name: "这一路", desc: "大自然轻音乐"},
        {src: "../musicImages/highlight2.png", albums_name: "这一路", desc: "大自然轻音乐"},
        {src: "../musicImages/highlight3.png", albums_name: "这一路", desc: "大自然轻音乐"},
        {src: "../musicImages/highlight4.png", albums_name: "这一路", desc: "大自然轻音乐"},
        {src: "../musicImages/highlight5.png", albums_name: "这一路", desc: "大自然轻音乐"},
        {src: "../musicImages/highlight6.png", albums_name: "这一路", desc: "大自然轻音乐"},
        {src: "../musicImages/highlight4.png", albums_name: "这一路", desc: "大自然轻音乐"},
        {src: "../musicImages/highlight5.png", albums_name: "这一路", desc: "大自然轻音乐"},
        {src: "../musicImages/highlight6.png", albums_name: "这一路", desc: "大自然轻音乐"},

    ],
};
// 推荐听书，音质专区，最新发行板块对应的组件类名
const highlightConfig = {
    sections: {
        '推荐听书': {
            containerClass: 'book-container',
            currentIndex: 0,
        },
        '最新发行': {
            containerClass: 'book2-container',
            currentIndex: 0,
        },
        '分类专区': {
            containerClass: 'book3-container',
            currentIndex: 0,
        },
        // 可以根据需要添加更多的部分
    },
};
//推荐听书，音质专区，最新发行板块  轮播图的结构
const addCarouselSection = (title, containerClass) => `
    <div class="book">
        <button class="arrow left" onclick="prevSlide('${containerClass}')">❮</button>
        <div class="${containerClass}"></div>
        <button class="arrow right" onclick="nextSlide('${containerClass}')">❯</button>
    </div>
`;

//精选部分的第一个轮播图的功能
function populateHighlights() {
    const container = document.querySelector('.carousel-container');
    const indicators = document.querySelector('.carousel-indicators');
    const itemsPerSlide = 3;
    const totalSlides = Math.ceil(highlightItems.length / itemsPerSlide);

    for (let i = 0; i < totalSlides; i++) {
        const slide = document.createElement('div');
        slide.classList.add('carousel-slide');
        slide.style.display = i === currentHighlightIndex ? 'flex' : 'none';

        for (let j = 0; j < itemsPerSlide; j++) {
            const itemIndex = i * itemsPerSlide + j;
            if (itemIndex < highlightItems.length) {
                const img = document.createElement('img');
                img.src = highlightItems[itemIndex].img;
                img.alt = highlightItems[itemIndex].alt;
                slide.appendChild(img);
            }
        }
        container.appendChild(slide);

        const dot = document.createElement('span');
        dot.classList.add('dot');
        if (i === currentHighlightIndex) {
            dot.classList.add('active');
        }
        dot.addEventListener('click', () => {
            currentHighlightIndex = i;
            updateHighlights();
        });
        indicators.appendChild(dot);
    }
}
function showNextHighlight() {
    currentHighlightIndex = (currentHighlightIndex + 1) % Math.ceil(highlightItems.length / 3);
    updateHighlights();
}
function showPreviousHighlight() {
    currentHighlightIndex = (currentHighlightIndex - 1 + Math.ceil(highlightItems.length / 3)) % Math.ceil(highlightItems.length / 3);
    updateHighlights();
}
function updateHighlights() {
    const slides = document.querySelectorAll('.carousel-slide');
    slides.forEach((slide, index) => {
        slide.style.display = index === currentHighlightIndex ? 'flex' : 'none';
    });

    const dots = document.querySelectorAll('.dot');
    dots.forEach((dot, index) => {
        dot.classList.toggle('active', index === currentHighlightIndex);
    });
}
//推荐听书，音质专区，最新发行  的轮播图功能
function prevSlide(containerClass) {
    // 找到对应的部分
    const section = Object.keys(highlightConfig.sections).find(key => highlightConfig.sections[key].containerClass === containerClass);
    const config = highlightConfig.sections[section];

    // 更新当前索引，循环切换
    config.currentIndex = (config.currentIndex - 1 + config.totalSlides) % config.totalSlides;

    // 更新显示
    updateBookHighlights(section);
}
function nextSlide(containerClass) {
    // 找到对应的部分
    const section = Object.keys(highlightConfig.sections).find(key => highlightConfig.sections[key].containerClass === containerClass);
    const config = highlightConfig.sections[section];

    // 更新当前索引，循环切换
    config.currentIndex = (config.currentIndex + 1) % config.totalSlides;

    // 更新显示
    updateBookHighlights(section);
}
function populateBookHighlights(section) {
    const containerClass = highlightConfig.sections[section].containerClass;
    const container = document.querySelector(`.${containerClass}`);
    const itemsPerSlide = 6; // 每个滑块包含的组件数
    const items = highlightContainerItems[section];
    const totalSlides = Math.ceil(items.length / itemsPerSlide);

    // 更新当前索引
    highlightConfig.sections[section].totalSlides = totalSlides; // 更新总滑块数
    highlightConfig.sections[section].currentIndex = 0; // 重置当前索引

    // 清空容器
    container.innerHTML = '';

    for (let i = 0; i < totalSlides; i++) {
        const slide = document.createElement('div');
        slide.classList.add('book-slide');

        for (let j = 0; j < itemsPerSlide; j++) {
            const itemIndex = i * itemsPerSlide + j;
            if (itemIndex < items.length) {
                const wrapper = document.createElement('div');
                wrapper.classList.add('imageBook-wrapper');
                const img = document.createElement('img');
                img.src = items[itemIndex].src; // 使用 src 属性

                const playLogo = document.createElement('div');
                playLogo.classList.add('play-logo');
                playLogo.innerHTML = '<i class="ri-play-fill"></i>'; // 使用图标

                // 根据不同的 section 添加不同的信息
                const imageInfo = document.createElement('div');
                imageInfo.classList.add('image-info');
                if (section === '推荐听书') {
                    imageInfo.innerHTML = `<span class="imageBook-count">${items[itemIndex].count}</span>`;
                } else if (section === '最新发行') {
                    imageInfo.innerHTML = `
                        <p class="image-playlist-name">${items[itemIndex].playlist_name}</p>
                        <p class="image-singer-name">${items[itemIndex].singer_name}</p>
                        <p class="image-release-date">${items[itemIndex].release_date}</p>`;
                } else if (section === '分类专区') {
                    imageInfo.innerHTML = `
                        <p class="image-albums-name">${items[itemIndex].albums_name}</p>
                        <p class="image-albums-desc">${items[itemIndex].desc}</p>`;
                }

                wrapper.appendChild(img);
                wrapper.appendChild(playLogo);
                wrapper.appendChild(imageInfo);
                slide.appendChild(wrapper);
            }
        }
        container.appendChild(slide);
    }

    // 更新滑块显示
    updateBookHighlights(section);
}
function updateBookHighlights(section) {
    const container = document.querySelector(`.${highlightConfig.sections[section].containerClass}`);
    const slides = container.querySelectorAll('.book-slide'); // 获取对应的书籍滑块

    // 隐藏所有滑块
    slides.forEach((slide, index) => {
        slide.style.display = index === highlightConfig.sections[section].currentIndex ? 'flex' : 'none';
    });
}
//加载精选的总框架
function loadHighlights(container) {
    let highlightsHTML = '';
    highlightsHTML += `
        <div class="carousel">
            <button class="arrow left" onclick="showPreviousHighlight()">❮</button>
            <div class="carousel-container"></div>
            <button class="arrow right" onclick="showNextHighlight()">❯</button>
            <div class="carousel-indicators"></div> <!-- 确保添加指示器容器 -->
        </div>
    `;

    highlightsData.forEach(section => {
        highlightsHTML += `
            <div class="highlights-list">
                <h2>${section.title}</h2>
                ${section.subtitle ? `<h3>${section.subtitle}</h3>` : ''}
                ${section.h4Items ? section.h4Items.map(item => `<h4>${item}</h4>`).join('') : ''}
                ${section.hasMore ? `
                    <div class="more-container">
                        <a href="#" class="more-link">更多</a>
                        <span class="arrow-right">❯</span>
                    </div>
                ` : ''}
            </div>
        `;

        if (section.isCarousel) {
            // 使用映射的类名
            const containerClass = highlightConfig.sections[section.title].containerClass;
            highlightsHTML += addCarouselSection(section.title, containerClass);
        } else {
            highlightsHTML += `<div class="image-frame">`;
            section.images.forEach(image => {
                highlightsHTML += `
                    <div class="image-wrapper">
                        <img src="${image.src}" alt="${image.desc}">
                        <div class="play-logo">
                            <i class="ri-play-fill"></i>
                        </div>
                        <span class="image-count">${image.count}</span>
                        <div class="image-info">
                            <p class="image-desc">${image.desc}</p>
                        </div>
                    </div>
                `;
            });
            highlightsHTML += `</div>`;
        }
    });

    highlightsHTML += `<div class="carousel"></div>`  //不加的话最后一个板块会被底部导航栏遮蔽
    // 将生成的HTML插入到容器中
    container.innerHTML = highlightsHTML;

    // 调用相应的populate函数以填充轮播图内容
    populateHighlights(); // 确保 populateHighlights 函数可用
    populateBookHighlights('推荐听书');
    populateBookHighlights('最新发行');
    populateBookHighlights('分类专区');

}

//************************************排行**************************/
//地区榜  特色榜   全球榜  数据格式
const data = {
    region: [
        {src: "../images/avatar.jpg", count: "2149.9万", desc: "欧美 | 欢快氛围"},
        {src: "../images/avatar.jpg", count: "1456.2万", desc: "亚洲 | 浪漫情怀"},
        {src: "../images/avatar.jpg", count: "2149.9万", desc: "欧美 | 欢快氛围"},
        {src: "../images/avatar.jpg", count: "1456.2万", desc: "亚洲 | 浪漫情怀"},
        {src: "../images/avatar.jpg", count: "2149.9万", desc: "欧美 | 欢快氛围"},
        {src: "../images/avatar.jpg", count: "1456.2万", desc: "亚洲 | 浪漫情怀"},
        {src: "../images/avatar.jpg", count: "2149.9万", desc: "欧美 | 欢快氛围"},
        {src: "../images/avatar.jpg", count: "1456.2万", desc: "亚洲 | 浪漫情怀"}
        // 更多地区榜数据
    ],
    special: [
        {src: "../images/enSong.webp", count: "3254.8万", desc: "热门 | 节奏强劲"},
        {src: "../images/enSong.webp", count: "2198.7万", desc: "精选 | 宁静平和"},
        {src: "../images/enSong.webp", count: "3254.8万", desc: "热门 | 节奏强劲"},
        {src: "../images/enSong.webp", count: "2198.7万", desc: "精选 | 宁静平和"},
        {src: "../images/enSong.webp", count: "3254.8万", desc: "热门 | 节奏强劲"},
        {src: "../images/enSong.webp", count: "2198.7万", desc: "精选 | 宁静平和"}

        // 更多特色榜数据
    ],
    wholeWorld: [
        {src: "../images/happy.jpg", count: "4123.4万", desc: "全球 | 热门金曲"},
        {src: "../images/happy.jpg", count: "3657.9万", desc: "全球 | 最新单曲"},
        {src: "../images/happy.jpg", count: "4123.4万", desc: "全球 | 热门金曲"},
        {src: "../images/happy.jpg", count: "3657.9万", desc: "全球 | 最新单曲"}
        // 更多全球榜数据
    ]
};
// 排行榜数据   共7个板块  只有对应的src count, songs可变化
const charts = [
    {
        src: "../musicImages/highlight1.png",
        count: "1863.4万",
        name: "飙升榜",
        songs: ["We Higher - 十个勤奋", "GBGN - CHANY", "我知道 - BY2"]
    },
    {
        src: "../musicImages/highlight1.png",
        count: "1920.0万",
        name: "热歌榜",
        songs: ["APT. - ROSÉ", "爱错 - 王力宏", "孤独患者 - 陈奕迅"]
    },
    {
        src: "../musicImages/highlight1.png",
        count: "28.2万",
        name: "新歌榜",
        songs: ["APT. - ROSÉ", "匿名的好友 - en", "镜花水月 - 张靓颖"]
    },
    {
        src: "../musicImages/highlight1.png",
        count: "795.3万",
        name: "流行指数榜",
        songs: ["匿名的好友 - en", "镜花水月 - 张靓颖", "Memories - Maroon 5"]
    },
    {
        src: "../musicImages/highlight1.png",
        count: "44.1万",
        name: "腾讯音乐人原创榜",
        songs: ["安全第一 - 李大奔BENZO", "再见 - Matt昌彦良", "Work It Out - 刘忱"]
    },
    {
        src: "../musicImages/highlight1.png",
        count: "305.0万",
        name: "听歌识曲榜",
        songs: ["APT. - ROSÉ", "Memories - Maroon 5", "青丝 - 时光胶囊"]
    },
    {
        src: "../musicImages/highlight1.png",
        count: "145.0万",
        name: "MV榜",
        songs: ["aespa《Whiplash》MV", "APT.- ROSÉ", "ITZY 'Imaginary Friend' MV"]
    },
];
//每个模块信息的变化
function generateRankingItems(data) {
    return `
        <div class="ranking-item">
            <div class="ranking-cover">
                <img src="${data.src}" alt="${data.title}">
                  <div class="play-logo">  
            <i class="ri-play-fill"></i> <!-- 使用ri-play-fill图标作为logo -->  
        </div> 
                <div class="ranking-count">${data.count}</div>
            </div>
            <div class="ranking-content">
                <h3>${data.name}</h3>
                <ol>
                    ${data.songs.map((song, index) => `<li>${index + 1}. ${song}</li>`).join('')}
                </ol>
            </div>
        </div>
    `;
}
//每个模块的总框架  利用generateRankingItems(data)更新每个模块的消息内容
function populateCharts() {
    let html = '';
    charts.forEach((chart, index) => {
        if (index % 3 === 0) {
            html += '<div class="ranking-container">';
        }

        html += generateRankingItems(chart);

        if ((index + 1) % 3 === 0 || index === charts.length - 1) {
            html += '</div>';
        }
    });
    return html;
}
// 地区榜  特色榜   全球榜 的格式
function generateChartItem(chart) {
    return `
        <div class="charts-wrapper">
            <img src="${chart.src}" alt="${chart.desc}">
            <div class="play-logo"><i class="ri-play-fill"></i></div>
            <span class="charts-count">${chart.count}</span>
            <div class="charts-info">
                <p class="charts-desc">${chart.desc}</p>
            </div>
        </div>
    `;
}
// 根据 chartType 加载数据并插入对应容器     利用 generateChartItem(chart)  完成地区榜  特色榜   全球榜内容变化
function loadChartsData(chartType) {
    const chartsContainer = document.querySelector(`.${chartType}-charts-container`);
    if (!chartsContainer) return;
    chartsContainer.innerHTML = data[chartType].map(generateChartItem).join('');
}
// 加载排行榜全部框架
function loadCharts(container) {
    container.innerHTML = `
        <div class="charts-container-wrapper">
            <div class="charts-container">
                ${populateCharts()}
            </div>
            <h2 id="region-charts">地区榜</h2>
            <div class="region-charts-container"></div>
            <h2 id="special-charts">特色榜</h2>
            <div class="special-charts-container"></div>
            <h2 id="wholeWorld-charts">全球榜</h2>
            <div class="wholeWorld-charts-container"></div>     
            <div class="carousel"></div>
        </div>
    `;
    loadChartsData("region");
    loadChartsData("special");
    loadChartsData("wholeWorld");
}

//***************************歌手*************************************/
// 头像不可见   歌手数据
const singer = [
    "周杰伦", "陈奕迅", "ROSÉ", "薛之谦", "林俊杰", "王力宏",
    "汪苏泷", "G.E.M. 邓紫棋", "周深", "王源", "陶喆", "许嵩",
    "李荣浩", "方大同", "刘德华", "张学友", "郑秀文", "李克勤"
];
//头像可见  歌手数据
const artists = [
    {name: "周杰伦", imgSrc: "../singer/ZJL.jpg"},
    {name: "陈奕迅", imgSrc: "../singer/Easen.jpg"},
    {name: "ROSÉ", imgSrc: "../singer/Rose.jpg"},
    {name: "薛之谦", imgSrc: "../singer/XZQ.jpg"},
    {name: "林俊杰", imgSrc: "../singer/JJ.jpg"},
    {name: "王力宏", imgSrc: "../singer/WLH.jpg"},
    {name: "周杰伦", imgSrc: "../singer/ZJL.jpg"},
    {name: "陈奕迅", imgSrc: "../singer/Easen.jpg"},
    {name: "ROSÉ", imgSrc: "../singer/Rose.jpg"},
    {name: "薛之谦", imgSrc: "../singer/XZQ.jpg"},
    // 可以继续添加其他歌手
];

// 使用 Grid 布局显示歌手名字
function displaySingersInVisibleList() {
    const container = document.querySelector('.artists-list_invisible');
    container.innerHTML = singer
        .map(name => `<p class="artist-name">${name}</p>`)
        .join('');
}

//头像可见  单个歌手的信息处理
function generateArtistItem(artist) {
    return `
    <div class="artist-card">
    <img src="${artist.imgSrc}" alt="${artist.name}">
            <p>${artist.name}</p>
    </div>
     `
}
//头像可见  歌手列表处理
function displaySingersVisibleList() {
    const container = document.querySelector('.artists-list');
    container.innerHTML = '';
    artists.forEach(artist => {
        container.innerHTML += generateArtistItem(artist); // 使用 generateArtistItem 生成 HTML
    });
}
//加载歌手总框架
function loadArtists(container) {
    container.innerHTML = `
        <div class="artists">
            <!-- 第一行导航栏 -->
            <nav>
                <div class="nav-item" onclick="showSingerContryPage('AllCountry')">全部</div>
                <div class="nav-item" onclick="showSingerContryPage('China')">内地</div>
                <div class="nav-item" onclick="showSingerContryPage('HongKong')">港台</div>
                <div class="nav-item" onclick="showSingerContryPage('America')">欧美</div>
                <div class="nav-item" onclick="showSingerContryPage('Japan')">日本</div>
                <div class="nav-item" onclick="showSingerContryPage('Korea')">韩国</div>            
            </nav>
            <!-- 第二行导航栏 -->
            <nav>
                <div class="nav-item" onclick="showSingerPage('AllSex')">全部</div>
                <div class="nav-item" onclick="showSingerPage('Male')">男</div>
                <div class="nav-item" onclick="showSingerPage('Female')">女</div>
                <div class="nav-item" onclick="showSingerPage('Group')">组合</div>
            </nav>
            <!-- 字母导航栏 -->
            <nav class="alphabet-nav">
                <div class="alphabet-item" onclick="filterArtists('All')">全部</div>
                <div class="alphabet-item" onclick="filterArtists('A')">A</div>
                <div class="alphabet-item" onclick="filterArtists('B')">B</div>
                <div class="alphabet-item" onclick="filterArtists('C')">C</div>
                <div class="alphabet-item" onclick="filterArtists('D')">D</div>
                <div class="alphabet-item" onclick="filterArtists('E')">E</div>
                <div class="alphabet-item" onclick="filterArtists('F')">F</div>
                <div class="alphabet-item" onclick="filterArtists('G')">G</div>
                <div class="alphabet-item" onclick="filterArtists('H')">H</div>
                <div class="alphabet-item" onclick="filterArtists('I')">I</div>
                <div class="alphabet-item" onclick="filterArtists('J')">J</div>
                <div class="alphabet-item" onclick="filterArtists('K')">K</div>
                <div class="alphabet-item" onclick="filterArtists('L')">L</div>
                <div class="alphabet-item" onclick="filterArtists('M')">M</div>
                <div class="alphabet-item" onclick="filterArtists('N')">N</div>
                <div class="alphabet-item" onclick="filterArtists('O')">O</div>
                <div class="alphabet-item" onclick="filterArtists('P')">P</div>
                <div class="alphabet-item" onclick="filterArtists('Q')">Q</div>
                <div class="alphabet-item" onclick="filterArtists('R')">R</div>
                <div class="alphabet-item" onclick="filterArtists('S')">S</div>
                <div class="alphabet-item" onclick="filterArtists('T')">T</div>
                <div class="alphabet-item" onclick="filterArtists('U')">U</div>
                <div class="alphabet-item" onclick="filterArtists('V')">V</div>
                <div class="alphabet-item" onclick="filterArtists('W')">W</div>
                <div class="alphabet-item" onclick="filterArtists('X')">X</div>
                <div class="alphabet-item" onclick="filterArtists('Y')">Y</div>
                <div class="alphabet-item" onclick="filterArtists('Z')">Z</div>
                <div class="alphabet-item" onclick="filterArtists('#')">#</div>
            </nav>
        </div>
        
        <div class="artist-container">
             <div class="artists-list"></div>
             <div class="artists-list_invisible"></div>
        </div>
        <div class="carousel"></div>
    `;
    displaySingersVisibleList()
    displaySingersInVisibleList();
}

//*******************************歌单************************************/
const songs = [
    {
        src: "../playlist/1.png",
        playCount: "2149.9万",
        name: "这首歌的杀伤力，大概和初恋一样",
        creator: "你还欠我一个晚安"
    },
    {src: "../playlist/2.png", playCount: "2.9亿", name: "很遥远吧，最后连一张合照都没有", creator: "贝多芬的猫"},
    {src: "../playlist/3.png", playCount: "1.8亿", name: "重温粤语经典好歌50首", creator: "有梦不难"},
    {src: "../playlist/4.png", playCount: "5069.0万", name: "K-pop制燥！假日氛围/氛围Slay", creator: "撸皮蛋辣椒"},
    {
        src: "../playlist/1.png",
        playCount: "2149.9万",
        name: "这首歌的杀伤力，大概和初恋一样",
        creator: "你还欠我一个晚安"
    },
    {src: "../playlist/2.png", playCount: "2.9亿", name: "很遥远吧，最后连一张合照都没有", creator: "贝多芬的猫"},
    {src: "../playlist/3.png", playCount: "1.8亿", name: "重温粤语经典好歌50首", creator: "有梦不难"},
    {src: "../playlist/4.png", playCount: "5069.0万", name: "K-pop制燥！假日氛围/氛围Slay", creator: "撸皮蛋辣椒"},
    {
        src: "../playlist/1.png",
        playCount: "2149.9万",
        name: "这首歌的杀伤力，大概和初恋一样",
        creator: "你还欠我一个晚安"
    },
    {src: "../playlist/2.png", playCount: "2.9亿", name: "很遥远吧，最后连一张合照都没有", creator: "贝多芬的猫"},
    {src: "../playlist/3.png", playCount: "1.8亿", name: "重温粤语经典好歌50首", creator: "有梦不难"},
    {src: "../playlist/4.png", playCount: "5069.0万", name: "K-pop制燥！假日氛围/氛围Slay", creator: "撸皮蛋辣椒"},
    {
        src: "../playlist/1.png",
        playCount: "2149.9万",
        name: "这首歌的杀伤力，大概和初恋一样",
        creator: "你还欠我一个晚安"
    },
    {src: "../playlist/2.png", playCount: "2.9亿", name: "很遥远吧，最后连一张合照都没有", creator: "贝多芬的猫"},
    {src: "../playlist/3.png", playCount: "1.8亿", name: "重温粤语经典好歌50首", creator: "有梦不难"},
    {src: "../playlist/4.png", playCount: "5069.0万", name: "K-pop制燥！假日氛围/氛围Slay", creator: "撸皮蛋辣椒"},
    {
        src: "../playlist/1.png",
        playCount: "2149.9万",
        name: "这首歌的杀伤力，大概和初恋一样",
        creator: "你还欠我一个晚安"
    },
    {src: "../playlist/2.png", playCount: "2.9亿", name: "很遥远吧，最后连一张合照都没有", creator: "贝多芬的猫"}
    // 可以继续添加更多歌曲数据...
];

function generatePlaylistCard(song) {
    return `
        <div class="playlist-card">
            <img src="${song.src}" alt="${song.name}">
             <div class="play-logo">  
            <i class="ri-play-fill"></i> <!-- 使用ri-play-fill图标作为logo -->  
        </div> 
            <div class="playlist-info">
                <span class="playlist-count">${song.playCount}</span>
                <p class="playlist-name">${song.name}</p>
                <p class="playlist-creator">${song.creator}</p>
            </div>
        </div>`;
}

function loadPlaylists(container) {
    const playlistCards = songs.map(generatePlaylistCard).join(''); // 调用生成卡片的函数
    container.innerHTML = `
        <!-- 分类导航 -->
        <div class="playlist-container">
            <!-- 分类导航 -->
            <div class="playlist-categories">
                <div class="category-item" onclick="showPlaylistCategory('All')">全部</div>
                <div class="category-item" onclick="showPlaylistCategory('Pop')">流行</div>
                <div class="category-item" onclick="showPlaylistCategory('HipHop')">说唱</div>
                <div class="category-item" onclick="showPlaylistCategory('Folk')">国风</div>
                <div class="category-item" onclick="showPlaylistCategory('Private')">私藏</div>
                <div class="category-item" onclick="showPlaylistCategory('Electronic')">电子</div>
                <div class="category-item" onclick="showPlaylistCategory('Rock')">摇滚</div>
                <div class="category-item" onclick="showPlaylistCategory('Light')">轻音乐</div>
            </div>

            <!-- 精选歌单标题 -->
            <h2 class="playlist-title">精选歌单</h2>

            <!-- 歌单列表 -->
            <div class="playlist-frame" id="playlist-container">
                ${playlistCards}  <!-- 插入所有歌单卡片 -->
            </div>
        </div>
        <div class="carousel">
    </div>
    `;
}


/*边听边玩*/
// 假设两组数据
const hotestData = [
    {src: "../musicImages/highlight1.png", desc: "羊了个羊", count: "2722.2万"},
    {src: "../musicImages/highlight1.png", desc: "贪吃蛇大战", count: "2679.2万"},
    {src: "../musicImages/highlight1.png", desc: "羊了个羊", count: "2722.2万"},
    {src: "../musicImages/highlight1.png", desc: "贪吃蛇大战", count: "2679.2万"},
    {src: "../musicImages/highlight1.png", desc: "羊了个羊", count: "2722.2万"},
    {src: "../musicImages/highlight1.png", desc: "贪吃蛇大战", count: "2679.2万"},
    {src: "../musicImages/highlight1.png", desc: "羊了个羊", count: "2722.2万"},
    {src: "../musicImages/highlight1.png", desc: "贪吃蛇大战", count: "2679.2万"},
    {src: "../musicImages/highlight1.png", desc: "羊了个羊", count: "2722.2万"},
    {src: "../musicImages/highlight1.png", desc: "贪吃蛇大战", count: "2679.2万"},
    {src: "../musicImages/highlight1.png", desc: "羊了个羊", count: "2722.2万"},
    {src: "../musicImages/highlight1.png", desc: "贪吃蛇大战", count: "2679.2万"},
];

const newestData = [
    {src: "../musicImages/highlight2.png", desc: "少女时代", count: "1977.9万"},
    {src: "../musicImages/highlight2.png", desc: "塔防精灵", count: "166.3万"},
    {src: "../musicImages/highlight2.png", desc: "少女时代", count: "1977.9万"},
    {src: "../musicImages/highlight2.png", desc: "塔防精灵", count: "166.3万"},
    {src: "../musicImages/highlight2.png", desc: "少女时代", count: "1977.9万"},
    {src: "../musicImages/highlight2.png", desc: "塔防精灵", count: "166.3万"},
    {src: "../musicImages/highlight2.png", desc: "少女时代", count: "1977.9万"},
    {src: "../musicImages/highlight2.png", desc: "塔防精灵", count: "166.3万"},
    {src: "../musicImages/highlight2.png", desc: "少女时代", count: "1977.9万"},
    {src: "../musicImages/highlight2.png", desc: "塔防精灵", count: "166.3万"},
    {src: "../musicImages/highlight2.png", desc: "少女时代", count: "1977.9万"},
    {src: "../musicImages/highlight2.png", desc: "塔防精灵", count: "166.3万"}

];

// 渲染游戏数据的函数
function renderPlayItems(containerId, data) {
    const container = document.getElementById(containerId);
    container.innerHTML = ''; // 清空内容

    data.forEach(item => {
        const wrapper = document.createElement('div');
        wrapper.className = 'play-wrapper';

        wrapper.innerHTML = `
            <img src="${item.src}" alt="${item.desc}">
            <div class="play-info">
                <div class="play-desc">${item.desc}</div>
                <div class="play-count">${item.count}</div>
            </div>
        `;

        container.appendChild(wrapper);
    });
}

// 根据点击的标签加载不同数据
function setupTabSwitching() {
    const tabs = document.querySelectorAll('.play-tab'); // 获取所有tab

    tabs.forEach(tab => {
        tab.addEventListener('click', function () {
            tabs.forEach(t => t.classList.remove('active')); // 移除所有的active状态
            tab.classList.add('active'); // 为当前点击的tab添加active状态

            // 判断点击的tab类型并加载数据
            if (tab.id === 'play-hotest') {
                renderPlayItems('play-container', hotestData);
            } else if (tab.id === 'play-newest') {
                renderPlayItems('play-container', newestData);
            }
        });
    });
}

// 显示选择的分类（目前仅打印）
function showListenAndPlayCategory(category) {
    console.log(`Selected Category: ${category}`);
    // TODO: 根据分类加载相应的数据
}

// 页面加载时调用的函数，用于初始化内容和绑定事件
function loadListenAndPlay(container) {
    const categories = [
        '全部', '休闲', '音乐舞蹈', '益智', '消除', 'MMO', 'ARPG', '回合',
        '飞行射击', '动作', '体育', '棋类', '牌类', '模拟经营', '塔防', '答题',
        '棋牌', 'MOBA', '枪战', '桌游', '战争策略', '对战', '赛车', '格斗',
        '迷宫', '拼图', '其他'
    ];

    const categoryHTML = categories.map(
        (label) => `
            <div class="gamecategory-item" onclick="showListenAndPlayCategory('${label}')">
                ${label}
            </div>`
    ).join('');
    container.innerHTML = `
      <div class="listenAndPlay-container-wrapper">
    <div class="listenAndPlay-container">
        <div class="listenAndPlay-categories">
            <div class="listenAndPlay-categories">
                ${categoryHTML}
            </div>
        </div>
        
    </div>
    <div class="search-container">
            <i class="ri-search-line"></i>
            <input type="text" placeholder="搜索">
        </div>
    <div class="highlights-list">
        <h3 id="play-hotest" class="play-tab">最热</h3>
        <h3 id="play-newest" class="play-tab">最新</h3>
    </div>

    <div class="playAndPlay-frame" id="play-container"></div>
    <div class="carousel">
    </div>
</div>

      `;
    // 初始化tab切换事件
    setupTabSwitching();
    // 默认显示最热数据
    renderPlayItems('play-container', hotestData);
}





